<template>
  <a-layout :class="['admin-layout', 'beauty-scroll']">
    <drawer v-if="isMobile" v-model="drawerOpen">
      <side-menu
        style="background-color: #ffffff"
        :theme="theme.mode"
        :menuData="menuData"
        :collapsed="false"
        :collapsible="false"
        @menuSelect="onMenuSelect"
        :drawerOpen="drawerOpen"
      />
    </drawer>
    <side-menu
      :drawerOpen="drawerOpen"
      :class="[fixedSideBar ? 'fixed-side' : '']"
      :theme="theme.mode"
      v-else-if="layout === 'side' || layout === 'mix'"
      :menuData="sideMenuData"
      :collapsed="collapsed"
      :collapsible="true"
      @toggleCollapse="toggleCollapse"
    />
    <div v-if="fixedSideBar && !isMobile" :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side"></div>
    <!-- <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
          <div class="setting" slot="handler">
            <a-icon :type="showSetting ? 'close' : 'setting'"/>
          </div>
          <setting />
        </drawer> -->

    <a-layout class="admin-layout-main beauty-scroll">
      <admin-header
        :class="[{ 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage }]"
        :style="headerStyle"
        :menuData="headMenuData"
        :collapsed="collapsed"
        @toggleCollapse="toggleCollapse"
      />
      <a-layout-header :class="['virtual-header', { 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage }]" v-show="fixedHeader"></a-layout-header>

      <a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;height: ${maxHeight}px;`">
        <div id="content-page" style="background-color: #f9f8f8; padding: 20px; height: 100%">
          <div style="position: relative; background-color: #ffffff" class="h-100 onePage">
            <slot></slot>
          </div>
        </div>
      </a-layout-content>

      <a-layout-footer style="padding: 0px">
        <page-footer :link-list="footerLinks" :copyright="copyright" />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import AdminHeader from './header/AdminHeader';
import PageFooter from './footer/PageFooter';
import Drawer from '../components/tool/Drawer';
import SideMenu from '../components/menu/SideMenu';
// import Setting from '../components/setting/Setting'
import { mapState, mapMutations, mapGetters } from 'vuex';

// const minHeight = window.innerHeight - 64 - 122

export default {
  name: 'AdminLayout',
  components: { SideMenu, Drawer, PageFooter, AdminHeader },
  data() {
    return {
      minHeight: window.innerHeight - 64 - 122,
      maxHeight: window.innerHeight - 60,
      collapsed: false,
      showSetting: false,
      drawerOpen: false,
      grayScroll: ['/bigdata'],
      whiteScroll: ['/system/org'],
    };
  },
  provide() {
    return {
      adminLayout: this,
    };
  },
  watch: {
    $route: {
      handler(val) {
        this.setActivated(val);
        if(this.$route.fullPath == '/textVerify'){
          document.getElementById('content-page').style.background = '#F4F9FD';
        } else {
          document.getElementById('content-page').style.background = '#f9f8f8';
        }
        if (this.grayScroll.includes(val.fullPath)) {
          document.getElementsByClassName('onePage')[0].style.background = '#f9f8f8';
          document.getElementsByClassName('admin-layout-content')[0].style.height = 'auto';
          document.getElementsByClassName('admin-layout-content')[0].style.minHeight = 'auto';
        } else if (this.whiteScroll.includes(val.fullPath)) {
          document.getElementsByClassName('onePage')[0].style.background = '#fff';
          document.getElementsByClassName('admin-layout-content')[0].style.height = 'auto';
          document.getElementsByClassName('admin-layout-content')[0].style.minHeight = 'auto';
        }  else {
          document.getElementsByClassName('onePage')[0].style.background = '#fff';
          document.getElementsByClassName('admin-layout-content')[0].style.height = this.maxHeight + 'px';
          document.getElementsByClassName('admin-layout-content')[0].style.minHeight = this.minHeight + 'px';
        }
      },
    },
    layout() {
      this.setActivated(this.$route);
    },
    isMobile(val) {
      if (!val) {
        this.drawerOpen = false;
      }
    },
  },
  mounted() {
    if(this.$route.fullPath == '/textVerify'){
      document.getElementById('content-page').style.background = '#F4F9FD';
    } else {
      document.getElementById('content-page').style.background = '#f9f8f8';
    }
    if (this.grayScroll.includes(this.$route.fullPath)) {
      document.getElementsByClassName('onePage')[0].style.background = '#f9f8f8';
      document.getElementsByClassName('admin-layout-content')[0].style.height = 'auto';
      document.getElementsByClassName('admin-layout-content')[0].style.minHeight = 'auto';
    } else if (this.whiteScroll.includes(this.$route.fullPath)) {
      document.getElementsByClassName('onePage')[0].style.background = '#fff';
      document.getElementsByClassName('admin-layout-content')[0].style.height = 'auto';
      document.getElementsByClassName('admin-layout-content')[0].style.minHeight = 'auto';
    }  else {
      document.getElementsByClassName('onePage')[0].style.background = '#fff';
      document.getElementsByClassName('admin-layout-content')[0].style.height = this.maxHeight + 'px';
      document.getElementsByClassName('admin-layout-content')[0].style.minHeight = this.minHeight + 'px';
    }
  },
  computed: {
    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar', 'fixedTabs', 'hideSetting', 'multiPage']),
    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
    sideMenuWidth() {
      return this.collapsed ? '60px' : '200px';
    },
    headerStyle() {
      // let width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100%)` : '100%'
      let width = '100%';
      let position = this.fixedHeader ? 'fixed' : 'static';
      return `width: ${width}; position: ${position};`;
    },
    headMenuData() {
      const { layout, menuData, firstMenu } = this;
      return layout === 'mix' ? firstMenu : menuData;
    },
    sideMenuData() {
      const { layout, menuData, subMenu } = this;
      return layout === 'mix' ? subMenu : menuData;
    },
  },
  methods: {
    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']),
    toggleCollapse() {
      this.collapsed = !this.collapsed;
    },
    onMenuSelect() {
      this.toggleCollapse();
    },
    setActivated(route) {
      if (this.layout === 'mix') {
        let matched = route.matched;
        matched = matched.slice(0, matched.length - 1);
        const { firstMenu } = this;
        for (let menu of firstMenu) {
          if (matched.findIndex((item) => item.path === menu.fullPath) !== -1) {
            this.setActivatedFirst(menu.fullPath);
            break;
          }
        }
      }
    },
  },
  created() {
    this.correctPageMinHeight(this.minHeight - 24);
    this.setActivated(this.$route);
  },
  beforeDestroy() {
    this.correctPageMinHeight(-this.minHeight + 24);
  },
};
</script>

<style lang="less">
@import '@/styles/variables';

.ant-menu-item {
  background-color: #ffffff !important;
  margin: 5px !important;
  font-size: 16px !important;
}
.ant-menu-submenu-selected,
.ant-menu-submenu-title:hover,
.ant-menu-item-selected > a,
.ant-menu-item-selected > a:hover,
.ant-menu-item-active > a:hover {
  color: @mainColor !important;
}
.ant-menu-item-selected,
.ant-menu-item-active {
  color: @mainColor !important;
  background-color: #FCEBEB !important;
}
</style>

<style lang="less" scoped>
@import '@/styles/variables';
.admin-layout {
  .side-menu {
    background-color: #ffffff;
    /deep/ .ant-menu-item-selected {
      background-color: #FCEBEB !important;
      position: relative;
      &::before{
        content: '';
        position: absolute;
        left: 0;
        width: 3px;
        height: 24px;
        background: #D43A3A;
        top: 50%;
        transform: translateY(-50%);
      }
      // border-left: 3px solid #D43A3A;
    }
    /deep/ .ant-menu-inline,
    /deep/ .ant-menu-inline .ant-menu-item::after {
      border: 0;
    }
    /deep/ .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
      transform: rotate(135deg) translateX(2px);
    }
    /deep/ .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
      transform: rotate(-135deg) translateX(2px);
    }
    /deep/ .ant-menu-submenu-open .ant-menu-submenu-arrow::before {
      transform: rotate(-45deg) translateX(2px) !important;
      background: @mainColor !important;
    }
    /deep/ .ant-menu-submenu-open .ant-menu-submenu-arrow::after {
      transform: rotate(-135deg) translateX(2px) !important;
      background: @mainColor !important;
    }
    /deep/ .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after {
      background: @mainColor !important;
    }
    /deep/ .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before {
      background: @mainColor !important;
    }
    /deep/ ul,
    /deep/ li {
      background-color: #ffffff;
    }
    /deep/.ant-menu-item {
      margin: 5px !important;
      margin-left: 0 !important;
      width: auto;
    }
    &.fixed-side {
      position: fixed;
      left: 0;
      height: calc(100% - 60px);
      top: 60px;
      z-index: 2;
    }
  }

  .virtual-side {
    transition: all 0.2s;
  }

  .virtual-header {
    transition: all 0.2s;
    opacity: 0;

    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0;
    }
  }

  .admin-layout-main {
    .admin-header {
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;
      z-index: 10;
      &.fixed-tabs.multi-page:not(.fixed-header) {
        height: 0;
      }
    }
  }

  .admin-layout-content {
    // padding: 24px 24px 0;
    /*overflow-x: hidden;*/
    /*min-height: calc(100vh - 64px - 122px);*/
  }

  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
}
</style>
